<template>
  <el-dialog title="编辑用户" :visible="show2" @close="handleEditclose" @open="handleOpen">
    <!-- 表单 -->
    <el-form ref="userFormRef" label-width="120px" :model="userForm">
      <el-form-item label="用户名" prop="username">
        <el-input v-model="userForm.username" style="width:80%" placeholder="请输入姓名" />
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="userForm.email" style="width:80%" placeholder="请输入邮箱" />
      </el-form-item>

      <el-form-item label="角色" prop="role">
        <el-input v-model="userForm.role" style="width:80%" placeholder="请输入角色" />
      </el-form-item>
      <el-form-item label="权限组名称" prop="permission_group_id">
        <el-select v-model="userForm.permission_group_id" style="width:80%" placeholder="请选择">
          <el-option v-for="item in limitNewList" :key="item.id" :label="item.title" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="联系电话" prop="phone">
        <el-input v-model="userForm.phone" style="width:80%" placeholder="请输入联系电话" />
      </el-form-item>
      <el-form-item label="介绍">
        <el-input v-model="userForm.introduce" style="width:80%" placeholder="介绍" />
      </el-form-item>

    </el-form>
    <!-- footer插槽 -->
    <template v-slot:footer>
      <el-button @click="handleEditclose">取消</el-button>
      <el-button type="primary" @click="handleEdit">确定</el-button>
    </template>
  </el-dialog>
</template>

<script>
import { editUserAPI, editUserContentAPI, limitListAPI } from '@/api/user'
export default {
  name: 'EditUser',

  //   父传子
  props: {
    show2: {
      type: Boolean,
      default: false
    },
    // 用户的id
    id: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      // 权限组id数组
      limitNewList: [],
      //  员工表单
      userForm: {
        avatar: '',
        email: '',
        introduction: '',
        password: '',
        permission_group_id: '',
        phone: '',
        role: '',
        username: ''

      }

    }
  },
  created() {
    this.limitList()
  },
  methods: {
    async limitList() {
      const resp = await limitListAPI(this.query)
      console.log(resp)
      this.limitNewList = resp.list
    },
    handleEditclose() {
      // 子传父通知父组件关闭弹窗
      this.$emit('handleEditclose', this.show2)
    },
    // 弹框打开时
    async handleOpen() {
      // 编辑信息回显
      const resp = await editUserAPI(this.id)
      console.log(resp)
      this.userForm = resp
    },
    // 编辑用户
    async handleEdit() {
      try {
        const obj = {
          avatar: '',
          id: '',
          email: '',
          introduction: '',

          permission_group_id: '',
          phone: '',
          role: '',
          username: ''
        }
        Object.keys(obj).forEach(key => {
          obj[key] = this.userForm[key]
        })
        await editUserContentAPI(obj)
        this.$emit('getUserList')
        this.handleEditclose()
      } catch (err) {
        //
        console.log(err)
      }
    }
  }}
</script>

  <style lang="scss" scoped >

      </style>

